<template>
  <Card :bordered="false" dis-hover>
    <Row>
      <i-col span="6">
        <Card style="minHeight:590px;" :bordered="false" dis-hover>
          <Form :model="formTop" label-position="top">
            <FormItem label="选择业务树形">
              <Select v-model="formTop.select">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
          </Form>

          <Tabs value="name1">
            <TabPane label="所有车辆" name="name1">
              <CarTreeList></CarTreeList>
            </TabPane>
            <TabPane label="搜索车辆" name="name2">
              <div>
                <Input search enter-button="Search" placeholder="输入车牌号" />
                <div style="height:10px"></div>
                <Input search enter-button="Search" placeholder="输入车标号" />
              </div>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="18">
        <Card style="minHeight:590px;" :bordered="false" dis-hover>
          <Row>
            <Button type="primary">批量绑定</Button>
            <Button type="primary" class="mg-left-10">绑定车辆</Button>
            <Input
              v-model="value14"
              placeholder="请输入车辆关键字"
              clearable
              style="width: 200px"
              class="mg-left-10"
            />
            <Button type="primary" class="mg-left-10" ghost>
              <Icon type="md-search" />查询
            </Button>
            <Button type="success" class="mg-left-10" ghost>当前选择的分组</Button>
            <Button type="success" class="mg-left-10" ghost>绑定的车辆数量</Button>
          </Row>
          <Table :columns="columns1" :data="data1" style="margin-top:20px;" border></Table>

          <div style="margin-top:10px;">
            <Page :total="10" show-elevator :page-size="5" />
          </div>
        </Card>
      </i-col>
    </Row>
  </Card>
</template>

<script>
import CarTreeList from "@/components/CarTreeList.vue";
import columns1 from "@/config/bindCar.js";
export default {
  name: "BindCar",
  components: {
    CarTreeList,
  },
  data() {
    return {
      formTop: {
        select: "",
      },
      columns1: columns1,
      value14:'',
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
};
</script>

<style>
.mg-left-10 {
  margin-left: 10px;
}
</style>